<!DOCTYPE HTML>
<html lang="en-US">

<head>
    <meta charset="UTF-8">
    <title>组织架构图</title>
    <link rel="stylesheet" href="../static/org/css/font-awesome.min.css">
    <link rel="stylesheet" href="../static/org/css/jquery.orgchart.css">
    <link rel="stylesheet" href="../static/org/css/style.css">
    <script src="../static/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="../static/org/js/jquery.orgchart.js"></script>
</head>

<body>
    <div id="chart-container"></div>
</body>
<script type="text/javascript">
    $(function () {

        var datascource = {
            'name': 'Lao Lao',
            'title': 'general manager',
            'children': [
                {
                    'name': 'Bo Miao', 'title': 'department manager', 'className': 'middle-level',
                    'children': [
                        { 'name': 'Li Jing', 'title': 'senior engineer', 'className': 'product-dept' },
                        {
                            'name': 'Li Xin', 'title': 'senior engineer', 'className': 'product-dept',
                            'children': [
                                { 'name': 'To To', 'title': 'engineer', 'className': 'pipeline1' },
                                { 'name': 'Fei Fei', 'title': 'engineer', 'className': 'pipeline1' },
                                { 'name': 'Xuan Xuan', 'title': 'engineer', 'className': 'pipeline1' }
                            ]
                        }
                    ]
                },
                {
                    'name': 'Su Miao', 'title': 'department manager', 'className': 'middle-level',
                    'children': [
                        { 'name': 'Pang Pang', 'title': 'senior engineer', 'className': 'rd-dept' },
                        {
                            'name': 'Hei Hei', 'title': 'senior engineer', 'className': 'rd-dept',
                            'children': [
                                { 'name': 'Xiang Xiang', 'title': 'UE engineer', 'className': 'frontend1' },
                                { 'name': 'Dan Dan', 'title': 'engineer', 'className': 'frontend1' },
                                { 'name': 'Zai Zai', 'title': 'engineer', 'className': 'frontend1' }
                            ]
                        }
                    ]
                }
            ]
        };

        $('#chart-container').orgchart({
            'data': datascource,
            'nodeContent': 'title'
        });

    });
</script>

</html>